<template>
  <div class="table">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="序号"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="录入信息名称"
        width="480"
        align="center">
      </el-table-column>
      <el-table-column
        prop="value"
        label="录入信息值"
        align="center">
        <template slot-scope="{row}">
          <el-form
            v-if="row.edit"
          >
            <el-form-item>
              <el-input v-model="row.value"  size="small"/>
            </el-form-item>
          </el-form>
          <span v-else>{{ row.value }}</span>
        </template>
      </el-table-column>
        <el-table-column align="center" label="操作" width="150" :resizable="false">
        <template slot-scope="{row}">
          <el-tooltip v-if="row.edit===1&&row.show===1" content="保存" placement="top">
            <el-button
              type="success"
              size="small"
              icon="el-icon-check"
              @click="checkEditSaveOk(row)"
            />
          </el-tooltip>
          <el-tooltip v-if="row.edit===0&&row.show===1" content="编辑" placement="top">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="row.edit=1"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="topRow">
        <el-button style="float:right;margin-right:50px" type="primary" @click="submit()">提交</el-button>
      </el-row>
    </div>
  </template>

  <script>
    import {getCompany,updateCompany} from '@/api/budget'
    export default {
      data() {
        return {
          tableData: [{
            number: '1',
            name: '单位编码',
            value: '',
            edit:0,
            show:0
          }, {
            number: '2',
            name: '单位名称',
            value: '',
            edit:0,
            show:0
          }, {
            number: '3',
            name: '国库执行码',
            value: '',
            edit:0,
            show:0
          }, {
            number: '4',
            name: '单位性质',
            value: '',
            edit:0,
            show:0
          }, {
            number: '5',
            name: '统一社会信用代码证',
            value: '',
            edit:0,
            show:1
          }, {
            number: '6',
            name: '通讯地址',
            value: '',
            edit:0,
            show:1
          }, {
            number: '7',
            name: '邮政编码',
            value: '',
            edit:0,
            show:1
          }, {
            number: '8',
            name: '财务联系人',
            value: '',
            edit:0,
            show:1
          }, {
            number: '9',
            name: '财务联系人职务',
            value: '',
            edit:0,
            show:1
          }, {
            number: '10',
            name: '联系电话',
            value: '',
            edit:0,
            show:1
          }]
        }
      },
      created(){
        this.getCompany()
      },
      methods:{
        checkEditSaveOk(row){
          row.edit = 0
        },
        getCompany(){
          getCompany().then(response =>{
            var data=response.data
            this.tableData[0].value=data.cpCode
            this.tableData[1].value=data.cpName
            this.tableData[2].value=data.treasuryCode
            this.tableData[3].value=data.cpNature
            this.tableData[4].value=data.socialCreditCode
            this.tableData[5].value=data.cpAddress
            this.tableData[6].value=data.postalCode
            this.tableData[7].value=data.cpContactPerson
            this.tableData[8].value=data.contactPersonPosition
            this.tableData[9].value=data.contactPhone
          })
        },
        submit(){
          var data={};
          data.cpCode=this.tableData[0].value
          data.cpName=this.tableData[1].value
          data.treasuryCode=this.tableData[2].value
          data.cpNature=this.tableData[3].value
          data.socialCreditCode=this.tableData[4].value
          data.cpAddress=this.tableData[5].value
          data.postalCode=this.tableData[6].value
          data.cpContactPerson=this.tableData[7].value
          data.contactPersonPosition=this.tableData[8].value
          data.contactPhone=this.tableData[9].value
          updateCompany(data).then(response=>{
            console.log(response)
            console.log("submit")
          })
        }
      }
    }
</script>
<style scoped>
.table{
  margin: 10px 20px 0;
}
</style>
